<template>
  <div>
    <el-card class="boox-card">
      <el-button type="primary" @click="dialogFormVisible = true">发布校园通知</el-button>
     
   
        

<el-dialog title="通知详情" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="通知名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动地点">
    <el-input v-model="form.place"></el-input>
  </el-form-item>
  <el-form-item label="活动时间">
                <el-input v-model="form.time"></el-input>
  </el-form-item>
 

 
  <el-form-item label="具体介绍">
    <el-input type="textarea" v-model="form.content"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
    <el-button @click="dialogFormVisible = false">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
<div>
  <br/>
</div>
    
    <el-table  :data="NoticeList" border stripe>
      <el-table-column type="index>" prop="noticeno"></el-table-column>
      <el-tableColumn label="活动名称" prop="name"></el-tableColumn>
      <el-tableColumn label="活动地点" prop="place"></el-tableColumn>
      <el-tableColumn label="活动时间" prop="time"></el-tableColumn>
      <el-tableColumn label="操作" with="180px">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.noticeno)"></el-button>
         <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeNoticeById(scope.row.noticeno)"></el-button>
        </template>
         
      </el-tableColumn>



    </el-table>
    </el-card>
   
    <!--------修改活动对话框-->
    <el-dialog title="修改通知" :visible.sync="editDialogVisible" width="50%">
      <el-form ref="editNoticeFormRef" :model="editNoticeForm" @close="editDialogClosed" label-position="left" label-width="120px">
      
        <el-form-item label="通知名称" prop="name">
          <el-input v-model="editNoticeForm.name"></el-input>
        </el-form-item>

        <el-form-item label="具体介绍" prop="content">
          <el-input type="textarea" v-model="editNoticeForm.content"></el-input>
        </el-form-item>
 
        <el-form-item label="活动地点" prop="place">
          <el-input v-model="editNoticeForm.place"></el-input>
        </el-form-item>

        <el-form-item label="活动时间" prop="time">
          <el-input v-model="editNoticeForm.time"></el-input>
       </el-form-item>

       <el-form-item>
          <el-button type="primary" @click="editNoticeInfo">确定</el-button>
          <el-button @click="editDialogVisible = false">取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
    
  </div>
</template>

<script>

export default {
data() {
  return {
       NoticeList:[],    
       dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        content:'',
        place: '',
        time: '',
        pubid:'',
  },
  //控制修改活动对话框的显示与隐藏
    editDialogVisible:false,
    //修改活动的表单数据
    editNoticeForm:{},
  }
},
created(){
  this.getNoticeList()
},
methods: {
  onSubmit(form) {
      this.$refs[form].validate((valid) => {
      this.loading = true;  // 提交按钮显示加载动画
      if (valid) {
        var pubid1=JSON.parse(sessionStorage.getItem('userInfo'));
        var npub=pubid1.pubid;
        let _this = this;
        this.axios({     // axios 向后端发起请求
          url: "/api/notice/save",  // 请求地址
          method: "post",             // 请求方法
          headers: {                  // 请求头
            "Content-Type": "application/json",
          },
          data: { // 请求参数，为 data，与登录的 params 不太一样
            
              name: _this.form.name,
              content: _this.form.content,
              place:_this.form.place,
              time:_this.form.time,  
              pubid:npub,
          },
        }).then((res) => { // 当收到后端的响应时执行该括号内的代码，res 为响应信息，也就是后端返回的信息
          if (res.data.code === '0') {  // 当响应的编码为 0 时，说明注册成功
            // 显示后端响应的成功信息
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          }else{  // 当响应的编码不为 0 时，说明注册失败
            // 显示后端响应的失败信息
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
          // 不管响应成功还是失败，收到后端响应的消息后就不再让登录按钮显示加载动画了
          _this.loading = false;
          console.log(res);
        });
      } else { // 如果账号或密码有一个没填，就直接提示必填，不向后端请求
        console.log("error submit!!");
        this.loading = false;
        return false;
      }
    });
  },
   getNoticeList(){
   
    var pubid1=JSON.parse(sessionStorage.getItem('userInfo'));
    var npub=pubid1.pubid;
    this.axios({
                url:"/api/notice/ownlist",
                method:"get",
                headers: {                  // 请求头
            "Content-Type": "application/json",
          },
          params: { // 请求参数，为 data，与登录的 params 不太一样
            pubid:npub,
          },
        }).then(response=>{
                    //response就是请求后返回的数据，response可以任意取名
                    // console.log(response)
                    //通过response获取具体数据，赋值给定义空数组
                    if(response.data.code == 0){
                    this.NoticeList = response.data.data
                } else {
                    alert(response.data.msg)
                }
                    this.NoticeList=response.data.data
                    console.log(this.NoticeList)
                    
                })//请求成功执行then方法
                .catch(error=>{
                    alert(error);
                   
                })//请求失败执行catch方法
          },
     showEditDialog(noticeno){
      
      this.axios({
               url:"/api/notice/detail",
               method:"get",
               
       params: { // 请求参数，为 data，与登录的 params 不太一样
         noticeno:noticeno,
       },
             })
               .then(response=>{
                   //response就是请求后返回的数据，response可以任意取名
                   // console.log(response)
                   //通过response获取具体数据，赋值给定义空数组
                   if(response.data.code == 0){
                   this.editDialogVisible=true
                   this.editNoticeForm = response.data.data[0]
               } else {
                   alert(response.data.msg)
               }
                   
                   console.log(noticeno)
                   
               })//请求成功执行then方法
               .catch(error=>{
                   alert(error);
                  
               })//请求失败执行catch方法
         },
 editDialogClosed(){
           this.$refs.editNoticeFormRef.resetFields()
         },
editNoticeInfo(){
           this.$refs.editNoticeFormRef.validate((valid)=>{
             if (valid) {
       let _this = this;
       this.axios({     // axios 向后端发起请求
         url: "/api/notice/update",  // 请求地址
         method: "put",             // 请求方法
         headers: {                  // 请求头
           "Content-Type": "application/json",
         },
         
         data: { // 请求参数，为 data，与登录的 params 不太一样
           noticeno:_this.editNoticeForm.noticeno,
           name: _this.editNoticeForm.name,
           content: _this.editNoticeForm.content,
           place:_this.editNoticeForm.place,
           time:_this.editNoticeForm.time,
           pubid:_this.editNoticeForm.pubid,
         },
       })
         }
         this.editDialogVisible=false
         this.getNoticeList()
         this.$message.success('更新通知信息成功！')
       })
 },
 
removeNoticeById(noticeno){

this.$confirm(
'此操作将永久删除该志愿活动，是否继续？',
'提示',
{confirmButtonText:'确定',
cancelButtonText:'取消',
type:"warning",}
).then(()=>{
this.axios({     // axios 向后端发起请求
     url: "/api/notice/delete",  // 请求地址
     method: "delete",             // 请求方法
     headers: {                  // 请求头
       "Content-Type": "application/json",
     },
     params: { // 请求参数，为 data，与登录的 params 不太一样
       noticeno:noticeno,
     },
   })
 .then((response) => {
  if(response.data.code==0)
   console.log("Delete Successfully"), 
   this.getNoticeList()
 })
})
},
        }
  }

</script>

<style lang="less" scoped>
</style>
